window.onload = function () {
	/*
	 *	todolist  有以下几个功能  
	 * 	添加，内容从input框获取   --- 添加给待办事项
	 * 	打勾  ： 待办事项里的框打勾后，转移到已完成时间去
	 * 	删除  ： 点击删除键，将事件删除
	 *  计数功能，计算事件的数量
	 * 	本地存储功能 ： 我们的事项数据全部保存本地     ---  localStorage  只可以存储字符串格式数据
	 * 
	 * 
	 * 	原理 ：   由于这里涉及到数据存储，所以这些事项，全部是通过数据渲染给页面的
	 * 		1、定义好我们的存储数据格式   ： 这里是数组里面存储对象   ----  arr  = [ {title : 'xxx' , done : false}]   
	 * 			-----title用来保存获取的用户输入内容   ，   done 是用来确认该数据要保存在待办事项还是已完成， 默认是待办事项
	 *		2、首先是键盘点击事件    ：   当判断到用户点击  enter键时  执行以下操作 ：
	 *      	----- 先获取本地存储数据   getData()                如果有返回数据   ：  否则返回一个空数组   
	 * 			----- 把输入的内容利用  arr.push() 方法添加到数据里面
	 * 			----- 然后保存数据       savaData()
	 * 				---  保存数据记得转化成字符串格式   JSON.stringify()  可以实现
	 * 			----- 重新渲染页面       load ()
	 * 				---  清空原来渲染的
	 * 				---  重新获取数据  
	 * 				---  遍历数据
	 *  			---  根据 done  的 true 或者   false   来确认给谁渲染数据
	 * 				---  这里还有个计数操作，不写了，反正逻辑简单
	 * 		3、其次是删除键事件  （这里关于删除键的获取，以及下面的复选框的获取， 都要放到一个初始化函数里，因为我们每次渲染页面都要重新获取以下这些节点，他们是动态添加的）
	 * 			-----  在初始化函数里分别给两个列表节点添加事件委托
	 * 			-----  然后给判断触发点是复选框还是删除键  执行相应操作
	 * 			-----  然后调用删除函数   del  
	 * 				---  函数里的操作也是老流程
	 * 					-- 先获取本地存储数据             
	 *                  -- 修改数据       
	 * 						-  这里我们在创建元素时，给好按钮和复选框一个下标，方便我们对应起来删除
	 * 						-  通过    splice(index,length)    删除下标项，长度设为1就可以了
  	 *                  -- 然后保存数据       
	 * 					-- 重新渲染
	 *		4、最后是复选框事件  (利用复选框特有属性来做判断  checked)
	 * 			-----  通过判断触发点，如果是复选框点击了，执行操作    hook 函数
	 * 				--- 老规矩  
	 * 					-- 先获取本地存储数据           
	 * 					-- 修改数据             
	 * 						- 通过判断复选框是否被选中， 来给我们  数组对象里面  的  todo  设置true  或者  false
	 * 					-- 然后保存数据    
	 * 					-- 重新渲染 
	 * 
	 * */
	/*面向对象形式*/
	var that = null;
	var value = '';  //获取输入框内容

	class TodoList {
		constructor() {
			that = this;

			/*获取输入框*/
			this.Input = document.querySelector('#addTxt');
			/*获取待办事项列表*/
			this.todoList = document.querySelector('.todo-list');
			/*已完成事项列表*/
			this.doneList = document.querySelector('.done-list');
			/*待办事项的数量*/
			this.todoNum = document.querySelector('.todo .num');
			/*事项完成的数量*/
			this.doneNum = document.querySelector('.done .num');
			/*初始化*/
			this.init();
			/*开始执行*/
			/*每次进来都要获取一下数据，渲染页面*/
			this.load();

			/*键盘事件*/
			this.Input.onkeyup = this.isEnter;
			/*删除键事件,todolist*/
			this.todoList.onclick = function (ev) {
				var e = ev || window.event;
				var target = e.target || window.event.srcElement;
				/*判断点击的是删除键还是复选框*/
				if (target.tagName.toLowerCase() == 'input') {
					/*执行复选框按钮的功能*/
					that.hook(target, target.getAttribute('id'));
				} else if (target.tagName.toLowerCase() == 'span') {
					/*执行删除按钮功能*/
					that.del(target.getAttribute('id'));  //getAttribute(自定义属性)  获取我们自定义的属性 
				}
			}

			/*删除事件，donelist*/
			this.doneList.onclick = function (ev) {
				var e = ev || window.event;
				var target = e.target || window.event.srcElement;
				/*判断点击的是删除键还是复选框*/
				if (target.tagName.toLowerCase() == 'input') {
					/*执行复选框按钮的功能*/
					that.hook(target, target.getAttribute('id'));
				} else if (target.tagName.toLowerCase() == 'span') {
					/*执行删除按钮功能*/
					that.del(target.getAttribute('id'));  //getAttribute(自定义属性)  获取我们自定义的属性 
				}
			}
		}

		/*这些节点通过动态添加，所以每次都需要重新获取*/
		init() {
			/*删除按钮,todolist里面的*/
			this.delBtn01 = document.querySelectorAll('.todo-list span');
			/*删除按钮，donelist里面的*/
			this.delBtn02 = document.querySelectorAll('.done-list span');
			/*添加事件委托*/
		}




		/* 1、输入框键盘事件*/
		isEnter(e) {
			/*获取按下的键的ASCLL码值*/
			var which = e.which || e.keyCode;
			/*每次键盘按下都获取一下输入的次*/
			value = that.Input.value;
			/*如果是enter，就可以添加到待办事项中*/
			/*判断第一个是否是空格，才可以添加*/
			if (which == 13) {
				if (value.indexOf(' ') != 0 && value.length != 0) {
					/*获取本地数据*/
					var data = that.getData();
					/*将新添加的内容插进获取的数据数组里*/
					/*这个格式是我们自己创建的*/
					data.push({ title: `${value}`, todo: false });
					/*重新保存*/
					that.saveData(data);
					/*渲染页面*/
					that.load();
					/*然后清空输入框的内容*/
					document.querySelector('#addTxt').value = '';
				} else {
					console.log('请输入待办事项');
				}
			}
		}

		/* 3、点击删除按钮操作 */
		del(id) {
			/*获取数据*/
			var data = that.getData();
			/*修改数据*/
			/*获取的是一个数组，所以通过删除字符串操作，来完成*/
			data.splice(id, 1);
			/*保存数据*/
			that.saveData(data);
			/*重新渲染数据*/
			that.load();
		}

		/* 4、点击复选框按钮*/
		hook(target, id) {
			/*获取数据*/
			var data = that.getData();
			/*修改数据*/
			/*判断是否被选中*/
			if (target.checked) {
				data[id].todo = true;
			} else {
				data[id].todo = false;
			}
			/*保存数据*/
			that.saveData(data);
			/*重新渲染*/
			that.load();
		}

		/*获取本地数据*/
		getData() {
			if (!localStorage) {
				alert('没有本地存储功能');
			} else {
				/*获取本地存储*/
				var data = localStorage.getItem('todolist');
				if (data != null) {
					/*返回数组对象格式的数据*/
					return JSON.parse(data);
				} else {
					/*否则返回一个数组*/
					return [];
				}
			}
		}
		/*保存本地数据*/
		saveData(data) {
			/*重新存储数据*/
			if (!localStorage) {
				alert('没有本地存储功能');
			} else {
				/*由于传进来是数组，我们要转化成字符串对象*/
				localStorage.setItem('todolist', JSON.stringify(data));
			}
		}

		/*2、  渲染数据*/
		load() {
			/*每次渲染前，先把页面其他渲染的数据清空*/
			that.todoList.innerHTML = '';  //说白就是把页面上它的内容清空掉
			that.doneList.innerHTML = '';  //刚开始还以为是要删除节点，原来这也可以
			//定义两个变量，用来计数  ,每次都从0开始
			var todoSum = 0,
				doneSum = 0;
			/*获取数据*/
			var data = that.getData();
			/*遍历数据，这里利用forEach*/
			/*数组.forEach(function(item,index,数组本身) {
			 * 	这里只需要两个参数就够了
			 * })*/
			data.forEach(function (item, index) {
				/*创建节点，渲染到页面上去*/
				var li = `<li>
						<input type="checkbox" id = ${index} />
						<p>${item.title}</p>
						<span id = ${index}>-</span>
					 </li>`;
				/*渲染到页面*/
				/*同时判断添加到哪里去*/
				if (!item.todo) {
					/*如果是true，添加到待办事项*/
					that.todoList.insertAdjacentHTML('afterbegin', li);
					/*计数*/
					todoSum++;
				} else {
					that.doneList.insertAdjacentHTML('afterbegin', li);
					/*已完成这里的复选框要勾选上*/
					document.querySelector('.done-list input').checked = 'checked';
					/*计数*/
					doneSum++;
				}
			});
			/*遍历完成后数据给我们计数标签*/
			that.todoNum.innerHTML = `${todoSum}`;
			that.doneNum.innerHTML = `${doneSum}`;
		}


	}
	/*初始化*/
	new TodoList();
}
